<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title></title>
	<link href="css/style.css" rel="stylesheet" type="text/css"/>
	<link href="css/admin-style.css" rel="stylesheet" type="text/css"/>
	<link href="css/date-picker.css" rel="stylesheet" type="text/css"/>
	<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="scripts/jquery-ui-1.10.2.min.js"></script>
	<script type="text/javascript" src="scripts/jquery-colors-min.js"></script>
	<script type="text/javascript" src="scripts/date.js"></script>
	<script type="text/javascript" src="scripts/jquery.date-picker.js"></script>
	<script type="text/javascript" src="scripts/jquery.mCustomScrollbar.concat.min.js"></script>
	<script type="text/javascript" src="scripts/effect.js"></script>
</head>
<body>
<div class="page">
	<div class="nav">
		<ul class="nav-list">
			<li class="nav-item"><a href="#">Navigate 1</a></li>
			<li class="nav-item"><a href="#">Navigate 2</a></li>
			<li class="nav-item"><a href="#">Navigate 3</a></li>
			<li class="nav-item"><a href="#">Navigate 4</a></li>
			<li class="nav-item"><a href="#">Navigate 5</a></li>
		</ul>
	</div>

	<div class="form-head">
		<span>Learning-English</span><span class="form-head-gray">Profile</span>

		<div class="form-head-task">
			<div class="form-head-account">
				<div class="form-head-account-wrapper">
					<div class="form-head-profile">
						<span>Username</span>
						<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					</div>
					<div class="form-head-logout"><a>Profile</a><a>Logout</a></div>
				</div>
			</div>
			<div class="form-head-search">
				<div class="form-head-search-mask">
					<input class="search-text" type="text" placeholder="Nhập nội dung tìm kiếm" value=""/>

					<div class="search-button"></div>
				</div>
			</div>

		</div>
	</div>
	<div class="form">
		<div class="admin-panel">
			<div class="profile-head">Control panel</div>
			<div class="admin-panel-content">
				<div class="admin-title">Check box list</div>
				<div class="table-row gap">
					<input id="admin-checkbox0" class="admin-checkbox" type="checkbox">
					<label for="admin-checkbox0" class="admin-checkbox-label">This is check box</label>
				</div>
				<div class="table-row gap">
					<input id="admin-checkbox1" class="admin-checkbox" type="checkbox" checked="checked">
					<label for="admin-checkbox1" class="admin-checkbox-label">This is check box</label>
				</div>
				<div class="table-row">
					<input id="admin-checkbox2" class="admin-checkbox" type="checkbox">
					<label for="admin-checkbox2" class="admin-checkbox-label">This is check box</label>
				</div>
				<div class="admin-title">Chose image</div>
				<div class="table-row gap">
					<div class="admin-upload">
						<span class="photo">Choose photo</span>
						<input type="file">
					</div>
				</div>
				<div class="table-row">
					<div class="admin-upload">
						<span class="file">Choose file</span>
						<input type="file">
					</div>
				</div>
				<div class="admin-title">Text field</div>
				<div class="table-row gap">
					<span class="admin-text-label">Text name 1</span>
					<input class="admin-text-input" type="text">
				</div>
				<div class="table-row gap">
					<span class="admin-text-label">Text name 2</span>
					<input class="admin-text-input" type="text">
				</div>
				<div class="table-row gap">
					<span class="admin-text-label">Text name 3</span>
					<input class="admin-text-input" type="text">
				</div>
				<div class="table-row">
					<span class="admin-text-label">Text area</span>
					<textarea class="admin-text-input area" maxlength="500"></textarea>
				</div>
				<div class="admin-title">Text field inline</div>
				<div class="table-row gap">
					<span class="admin-text-label inline">Text name 1:</span>
					<input class="admin-text-input" type="text">
				</div>
				<div class="table-row gap">
					<span class="admin-text-label inline">Text name 2:</span>
					<input class="admin-text-input" type="text">
				</div>
				<div class="table-row gap">
					<span class="admin-text-label inline">Text name 3:</span>
					<input class="admin-text-input" type="text">
				</div>
				<div class="table-row">
					<span class="admin-text-label inline">Text area</span>
					<textarea class="admin-text-input area" maxlength="500"></textarea>
				</div>
				<div class="admin-title">Button list</div>
				<div class="table-row gap">
					<input class="admin-button add" type="button" value="Add"/>
					<input class="admin-button edit" type="button" value="Edit"/>
					<input class="admin-button delete" type="button" value="Delete"/>
				</div>
				<div class="table-row gap">
					<input class="admin-button cancel" type="button" value="Cancel"/>
					<input class="admin-button submit" type="button" value="Submit"/>
				</div>
			</div>
			<div class="admin-title">Combo Box</div>
			<div class="table-row gap">
				<div class="admin-select">
					<select>
						<option>First option</option>
						<option>Second option</option>
						<option>Third option</option>
					</select>
				</div>
			</div>
			<div class="table-row gap">
				<div class="admin-select">
					<select>
						<option>First option 2</option>
						<option>Second option 2</option>
						<option>Third option 2</option>
					</select>
				</div>
			</div>
			<div class="admin-title">Table</div>
			<table class="admin-table gap">
				<thead class="admin-table-head">
				<tr><td class="admin-table-cell">Head</td>
					<td class="admin-table-cell-full">Content</td>
					<td class="admin-table-cell">Control</td>
				</tr>
				</thead>
				<tbody>
				<tr class="admin-table-row">
					<td class="admin-table-cell">2:00→2:30</td>
					<td class="admin-table-cell-full">
						<span class="table-long-text">
						Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.
						Duis tincidunt lectus quis dui viverra vestibulum.
						</span>
					</td>
					<td class="admin-table-cell">
						<input class="admin-table-button edit" type="button" value="Edit">
						<input class="admin-table-button delete" type="button" value="Remove">
					</td>
				</tr>
				<tr class="admin-table-row">
					<td class="admin-table-cell">2:30→3:10</td>
					<td class="admin-table-cell-full">
						<span class="table-long-text">
							Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
						Sed eleifend nonummy diam. Praesent mauris ante, elementum et.
						</span>
					</td>
					<td class="admin-table-cell">
						<input class="admin-table-button edit" type="button" value="Edit">
						<input class="admin-table-button delete" type="button" value="Remove">
					</td>
				</tr>
				<tr class="admin-table-row">
					<td class="admin-table-cell">3:10→3:20</td>
					<td class="admin-table-cell-full">
						<span class="table-long-text">
							Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
						Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.
						Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh.
						Duis tincidunt lectus quis dui viverra vestibulum.
						</span>
					</td>
					<td class="admin-table-cell">
						<input class="admin-table-button edit" type="button" value="Edit">
						<input class="admin-table-button delete" type="button" value="Remove">
					</td>
				</tr>
				<tr class="admin-table-row">
					<td class="admin-table-cell">3:20→4:40</td>
					<td class="admin-table-cell-full">
						<span class="table-long-text">
							Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
						Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.
						Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh.
						Duis tincidunt lectus quis dui viverra vestibulum.
						</span>
					</td>
					<td class="admin-table-cell">
						<input class="admin-table-button edit" type="button" value="Edit">
						<input class="admin-table-button delete" type="button" value="Remove">
					</td>
				</tr>
				</tbody>
				<tfoot class="admin-table-foot">
				<tr>
					<td class="admin-table-cell-full" colspan="3">
						<input class="admin-table-button prev unable" type="button" value="Back">
						<input class="admin-table-button next" type="button" value="Next">
					</td>
				</tr>
				</tfoot>
			</table>
		</div>
		<div class="admin-footer"></div>
	</div>
</div>
</body>
</html>